<template>
  <div class="main" v-show="contentList.bookname!==undefined" style="margin-bottom:50px;">
    <div class="bookname">
      <h1>{{contentList.bookname}}</h1>
      <!-- <h1>2阿松大</h1> -->

    </div>
    <!-- 头部切换章节区域 -->
    <div class="switch" style="border-top:0;margin-top:10px;border-bottom:1px dashed gray;   padding-bottom: 10px;">
      <div class="last_chapter" @click="lastchapter">
        <span>
          上一章
        </span>
      </div>

      <div class="chapter" @click="chapter">
        <span> 章节目录</span>
      </div>

      <div class="next_chapter" @click="nextchapter">
        <span>
          下一章
        </span>
      </div>
    </div>

    <div class="content">
      {{contentList.content}}

    </div>

    <!-- 底部切换章节区域 -->
    <div class="switch" style="margin-bottom:20px">
      <div class="last_chapter" @click="lastchapter">
        <span>
          上一章
        </span>
      </div>

      <div class="chapter" @click="chapter">
        <span> 章节目录</span>
      </div>

      <div class="next_chapter" @click="nextchapter">
        <span>
          下一章
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Cont-ent',
  data () {
    return {
      contentList: {},
      // 进入文章页面的索引
      chapterurl: this.$route.params.url,
      // 当前文章url索引
      index: null,
      // 当前小说的全部的url
      newhrefList: []

    }
  },
  async mounted () {
    // 判断当前url是数组中的第几个
    // console.log(this.$store.state.chapter.href)\
    // 获取当前小说的所有跳转的索引值

    this.$nextTick(() => {
      const hrefList = this.$store.state.chapter.href
      // 循环索引，把里面的每一项进行切割，切割成需要的内容url索引
      hrefList.forEach(item => {
      // 7-15
        const a = item.slice(-13, -5)
        this.newhrefList.push(a)
      })
      // 延迟一回合执行
      // 获取当前页面数组的索引  然后请求该页面的数据
      this.index = this.newhrefList.findIndex(item => item === this.chapterurl)

      this.reqGetcontent({ id: this.$route.params.id, url: this.chapterurl })
    })
  },

  methods: {
    // 点击跳转下一章页面数据
    nextchapter () {
      // 跳转下一页，页面滚动条回到顶部
      document.documentElement.scrollTop = 0
      if (this.index === this.newhrefList.length - 1) {
        return this.$message({
          type: 'warning',
          message: '当前是最后一章'
        })
      }

      this.index++

      this.chapterurl = this.newhrefList[this.index]
      this.$router.push(`/content/${this.$route.params.id}/${this.chapterurl}`)
      this.reqGetcontent({ id: this.$route.params.id, url: this.chapterurl })
    },
    // 点击跳转上一章页面数据
    lastchapter () {
      // 跳转上一页，页面滚动条回到顶部
      document.documentElement.scrollTop = 0
      //  如果索引<0就表示当前是第一章，不能再点击了

      if (this.index === 0) {
        return this.$message({
          type: 'warning',
          message: '当前是第一章',
          center: true
        })
      }

      this.index--

      this.chapterurl = this.newhrefList[this.index]
      this.$router.push(`/content/${this.$route.params.id}/${this.chapterurl}`)

      this.reqGetcontent({ id: this.$route.params.id, url: this.chapterurl })
    },
    chapter () {
      this.$store.commit('SETNAME', this.contentList.bookname)
      this.$router.push({
        path: `/chapter/${this.$route.params.id}`
      })
    },
    // 封装请求
    async reqGetcontent ({ id, url }) {
      const res = await this.$API.reqGetContent({
        id: id,
        url: url
      })
      this.contentList = res.data
    }
  },
  watch: {
    $route: {
      handler () {
        // console.log(this.$route)
        this.reqGetcontent({ id: this.$route.params.id, url: this.$route.params.url })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.bookname {
  text-align: center;
  // font-weight: none;
  h1 {
    font-size: 24px;
  }
}
.content {
  font-size: 24px;
  line-height: 350%;
  padding-top: 20px;
}
.main {
  // display: flex;
    height: 100%;
    width: 80%;
  padding: 0 50px;
  border: 2px solid #409eff;
  .chapter {
    cursor: pointer;
  }
  .next_chapter {
    cursor: pointer;
  }
  .last_chapter {
    cursor: pointer;
  }
}
.switch {
  padding-top: 10px;
  border-top: 1px dashed gray;
  justify-content: space-between;
  // width: 500px;
  display: flex;
  color: #085308;
}
</style>
